<template lang="pug">
.user-manage.app-container
  .public-search-wrap
    el-form(:inline="true" class="demo-form-inline")
      el-form-item(label="用户名:")
        el-input(v-model="state.pageData.userName" placeholder="用户名" clearable)
      el-form-item(label="运营名称:")
        el-select(v-model="state.pageData.operate" filterable clearable placeholder='运营名称')
          el-option(value="运营一" label="运营一")
          el-option(value="运营二" label="运营二")
      el-form-item(label="日期:")
        el-date-picker(v-model="state.pageData.startTime" type="date" placeholder="选择开始日期" value-format="yyyy-MM-dd" clearable)
      el-form-item
        el-button(type="primary" size="small" icon="el-icon-search" @click="searchFun") 查询
        el-button(type="primary" size="small" icon='el-icon-plus' @click="addShow = true") 添加

  .table-main
    el-table(:data="state.listData" border v-loading="tableLoading")
      el-table-column(label="序号" prop="id" align="center" width="70")
      el-table-column(label="用户名" align="center" prop="userName" min-width="120")
      el-table-column(label="角色" align="center" prop="roleName" min-width="120" show-overflow-tooltip)
      el-table-column(label="部门" prop="department" align="center" min-width="120")
      el-table-column(label="操作" width="220" align="center")
        template(#default="scope")
          el-button(size="mini" type="primary" @click="handleEdit(scope.row)") 编辑
          el-button(size="mini" type="warning" @click="handleRole") 角色
          el-button(size="mini" type="danger" @click="handleDel(scope.row)") 删除

  .pagination-wrap
    .page-text 本页显示：1-20&nbsp;&nbsp;&nbsp;&nbsp;总记录数：60
    .pagination
      el-pagination(background layout="prev, pager, next, jumper" :total="total" :current-page="Number(state.pageData.page)" :page-size="state.pageData.limit" @current-change="handleCurrentChange")

  userManageAdd(v-model:isDialog="addShow" @closeFun="handleColse")
  userManageEdit(v-model:isDialog="editShow" v-model:dialogRecord="state.defaultData" @closeFun="handleColse")
  userManageRole(v-model:isDialog="roleShow" @closeFun="handleColse")
</template>

<script setup>
import userManageAdd from './userManageAdd.vue'
import userManageEdit from './userManageEdit.vue'
import userManageRole from './userManageRole.vue'

import { getUserList } from '@/api/user'

import { ref, reactive, toRefs, getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance() // 内部组件实例

// 数据
const state = reactive({
  pageData: {
    page: 1,
    limit: 20,
    userName: '',
    operate: '',
    startTime: ''
  },
  listData: [], // 列表数据
  defaultData: {}
})
const total = ref(60)
const tableLoading = ref(false)
const addShow = ref(false)
const editShow = ref(false)
const roleShow = ref(false)

queryFun()

/** 搜索逻辑开始 */
function queryFun () {
  const query = proxy.$route.query
  for (const key in query) state.pageData[key] = query[key]

  getList()
}
function handleCurrentChange (val) { searchRouter(val) }
function searchFun () { searchRouter(1) }
function searchRouter (val) {
  const query = Object.assign({}, state.pageData)
  for (const key in query) {
    if (!query[key] || key === 'limit') delete query[key]
  }
  query.page = val
  proxy.$router.push({ name: proxy.$route.name, query: query })
}
/** 搜索逻辑结束 */

// 获取列表
async function getList () {
  // tableLoading.value = true
  // const getData = await getUserList(state.pageData)

  state.listData = [
    { id: 0, userName: '名称0', roleName: '运营', roleNameId: '0', department: '销售部', departmentId: '0' },
    { id: 1, userName: '名称1', roleName: '运营', roleNameId: '1', department: '销售部', departmentId: '1' },
    { id: 2, userName: '名称2', roleName: '前端', roleNameId: '2', department: '媒介部', departmentId: '2' },
    { id: 3, userName: '名称3', roleName: '后端', roleNameId: '3', department: '财务部', departmentId: '3' },
    { id: 4, userName: '名称4', roleName: '后端', roleNameId: '4', department: '财务部', departmentId: '4' },
    { id: 5, userName: '名称5', roleName: '后端', roleNameId: '5', department: '财务部', departmentId: '5' },
    { id: 6, userName: '名称6', roleName: '后端', roleNameId: '6', department: '财务部', departmentId: '6' },
    { id: 7, userName: '名称7', roleName: '后端', roleNameId: '7', department: '财务部', departmentId: '7' },
    { id: 8, userName: '名称8', roleName: '后端', roleNameId: '8', department: '财务部', departmentId: '8' },
    { id: 9, userName: '名称9', roleName: '后端', roleNameId: '9', department: '财务部', departmentId: '9' },
  ]
}

// 编辑
function handleEdit (row) {
  state.defaultData = row
  editShow.value = true
}

// 选择角色
function handleRole () {
  roleShow.value = true
}

// 删除列表
function handleDel (row) {
  proxy.$confirm('确定删除？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    proxy.$message({ type: 'success', message: '删除成功' })
  }).catch(() => {
    proxy.$message({ type: 'warning', message: '已取消删除' })
  })
}

// 关闭弹窗
function handleColse (val) {
  console.log('close')
}
</script>

<style lang="scss">
</style>
